<template>
  <div class="app-content home">
    <div class="slider">
      <!--此处需要后端根据设备信息返回不同图片-->
      <swiper ref="swiper" :options="swiperOption">
        <swiper-slide
          v-for="(item, idx) in bannerList"
          :key="idx"
        >
          <div class="img-box">
            <img :src="item" alt="">
          </div>
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" :style="{ transform: `translateY(-${bannerList.length * 5}%)`}" />
      </swiper>
      <div class="home-notice">
        <notice :type="2" />
      </div>
    </div>
    <div class="w-1200 home-search">
      <div class="img-box left-image hidden-xs-only">
        <img src="../../assets/images/search-left-icon.png" alt="">
      </div>
      <div class="right-input">
        <div class="input-wrapper">
          <el-input class="search-input" prefix-icon="el-icon-search" />
          <el-button class="search-button" placeholder="请输入关键字" type="primary">搜索</el-button>
        </div>
        <div class="hot-search hidden-xs-only">
          <span class="text">热搜: </span>
          <ul>
            <li v-for="(item, idx) in hotKeywords" :key="idx">{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-1200 home-query hidden-xs-only">
      <div class="home-query-content">
        <div class="home-card-head">
          <div class="title-box">
            <h2 class="title">在线查询工具</h2>
            <span class="title-en">Online query tool</span>
          </div>
          <div class="more-button hidden-xs-only">更多></div>
        </div>
        <div class="query-tool">
          <div class="tool-left bg-2">
            <h4>查询工具</h4>
            <div class="type-list">
              <p
                v-for="(item, idx) in interfaceType"
                :key="idx"
                :class="['type-list-item', toolTypeCur === idx ? 'active' : '']"
                @mouseenter="handleMouse('toolTypeCur', idx)"
              >{{ item }}</p>
            </div>
          </div>
          <div class="tool-right">
            <el-scrollbar style="height: 100%">
              <div class="tool-list">
                <div v-for="item in 9" class="tool-item">
                  <div class="tool-item-inner">
                    <div class="img-box left-icon">
                      <img src="https://cdn.wapi.cn/upload/1d/ca/ca447614e09d5e6d07c8b33e3cd89405.png?v=20240226" alt="">
                    </div>
                    <div class="right-info">
                      <h5 class="tool-name" title="身份证真伪在线核验 - 在线工具">身份证真伪在线核验</h5>
                      <p class="tool-sub-name">可查询快递物流信息近500+家全国快递，1个单号，自动识别，包括：顺丰、申通、圆通、韵达、中通、汇通、EMS、天天、国通、德邦、宅急送等几百家快递物流查询。</p>
                      <p class="price free">￥2</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
    <div class="w-1200 home-query hidden-xs-only">
      <div class="home-query-content">
        <div class="home-card-head">
          <div class="title-box">
            <h2 class="title">API接口</h2>
            <span class="title-en">API interface</span>
          </div>
          <div class="more-button">更多></div>
        </div>
        <div class="query-tool">
          <div class="tool-left bg-1">
            <h4>API接口</h4>
            <div class="type-list">
              <p
                v-for="(item, idx) in interfaceType"
                :key="idx"
                :class="['type-list-item', interfaceTypeCur === idx ? 'active' : '']"
                @mouseenter="handleMouse('interfaceTypeCur', idx)"
              >{{ item }}</p>
            </div>
          </div>
          <div class="tool-right">
            <el-scrollbar style="height: 100%">
              <div class="tool-list">
                <div v-for="item in 9" class="tool-item">
                  <div class="tool-item-inner">
                    <div class="img-box left-icon">
                      <img src="https://cdn.wapi.cn/upload/1d/ca/ca447614e09d5e6d07c8b33e3cd89405.png?v=20240226" alt="">
                    </div>
                    <div class="right-info">
                      <h5 class="tool-name" title="身份证真伪在线核验 - 在线工具">身份证真伪在线核验</h5>
                      <p class="tool-sub-name">可查询快递物流信息近500+家全国快递，1个单号，自动识别，包括：顺丰、申通、圆通、韵达、中通、汇通、EMS、天天、国通、德邦、宅急送等几百家快递物流查询。</p>
                      <p class="price free">￥2</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
    <div class="w-1200 home-query">
      <div class="home-query-content">
        <div class="home-card-head">
          <div class="title-box">
            <h2 class="title">热门推荐</h2>
            <span class="title-en">Hot recommendation</span>
          </div>
          <div class="more-button hidden-xs-only">更多></div>
        </div>
        <div class="query-tool tool-2">
          <div class="tool-right">
            <div class="tool-list tool-list-2">
              <div v-for="item in 8" class="tool-item">
                <div class="tool-item-inner">
                  <div class="img-box left-icon">
                    <img src="https://cdn.wapi.cn/upload/1d/ca/ca447614e09d5e6d07c8b33e3cd89405.png?v=20240226" alt="">
                  </div>
                  <div class="right-info">
                    <h5 class="tool-name" title="身份证真伪在线核验 - 在线工具">身份证真伪在线核验</h5>
                    <p class="tool-sub-name">可查询快递物流信息近500+家全国快递，1个单号，自动识别，包括：顺丰、申通、圆通、韵达、中通、汇通、EMS、天天、国通、德邦、宅急送等几百家快递物流查询。</p>
                    <p class="price">￥2.98/次</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-1200 home-query">
      <div class="home-query-content">
        <div class="home-card-head">
          <div class="title-box">
            <h2 class="title">微查系统</h2>
            <span class="title-en">Micro-check system</span>
          </div>
          <div class="more-button hidden-xs-only">详情></div>
        </div>
        <div class="micro-sub-title">集各色查询、核验于一体的查询系统;专业团队、专属定制、拓展性强、高效运营</div>
        <micro-card-list />
      </div>
    </div>
    <div class="w-1200 home-query">
      <div class="home-query-content">
        <div class="home-card-head">
          <div class="title-box">
            <h2 class="title">科技热点</h2>
            <span class="title-en">NEWS</span>
          </div>
          <div class="more-button hidden-xs-only">更多></div>
        </div>
        <div class="home-news">
          <ul class="home-news-list">
            <li class="home-news-list__item clearfix" v-for="i in 10">
              <div class="img-box left-img">
                <img src="https://cdn.wapi.cn/upload/1d/ca/ca447614e09d5e6d07c8b33e3cd89405.png?v=20240226" alt="">
              </div>
              <div class="right-news-info">
                <div class="title-box">
                  <h2 class="title">巴基斯坦2022年货物和服务出口达到395巴基斯坦2022年货物和服务出口达到395巴基斯坦2022年货物和服务出口达到395巴基斯坦2022年货物和服务出口达到395.16亿,突破以往任何一年</h2>
                  <p class="time">2024-08-31</p>
                </div>
                <div class="sub-title">[wapi.cn]巴基斯坦1961年货物和服务出口2巴基斯坦1961年货物和服务出口2巴基斯坦1961年货物和服务出口2巴基斯坦1961年货物和服务出口2巴基斯坦1961年货物和服务出口2.56亿创下新低货物和服务出口是指向世界其他国家供应的所有货物和其他市场服务的价值。其包括商品、货运、保险、运输、旅游、版税、特许权费，以及通讯、建筑、金融、信息、商</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-1200 home-query home-new-interface">
      <div class="home-new-interface-inner">
        <div class="home-query-content">
          <span>最新接口：</span>
          <span v-for="item in newInterface" class="item">{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import MicroCardList from '@/views/components/MicroCardList'
import Notice from '@/views/components/Notice'

export default {
  name: 'Home',
  components: {
    swiper,
    swiperSlide,
    MicroCardList,
    Notice
  },
  mixins: [],
  props: {},
  data() {
    return {
      bannerList: [
        require('@/assets/images/test/home_banner.jpg'),
        require('@/assets/images/test/home_ip.png'),
        require('@/assets/images/test/home_weicha.png')
      ],
      hotKeywords: ['身份证验证接口', '批量查验', '数据源', '视频会员充值', '小程序开发', '空号', '历届奥运会', '站长工具接口', '微查系统', '机主验证', '银行卡归属地'],
      interfaceType: ['汽车管理', '金融科技', '企业工商', '生活服务', '站长工具', '智能识别'],
      newInterface: ['位置查询省市区', '车牌号查车辆信息', '维保结果查询', '车辆精准估值', '车估值地区列表', '车辆(精准)估值车型列表', '车辆(精准)估值车系列表', '车辆(精准)估值品牌列表', '银行卡查银行分行联行号', '汽车故障代码', '企业联系方式查询', '最新ICP备案域名', '节假日查询', '增值税发票文字识别OCR', '企业工商四要素验证', '企业工商三要素验证', '八字算命', 'IPv6地址区县级', '返回城市疫情风险地区[不再更新]', '返回银行名称列表', '联行号按关键词搜索', '返回联行号省份城市名称', '联行号按银行返回', '联行号查找开户行', '联行号按城市返回'],
      toolTypeCur: 0,
      interfaceTypeCur: 0,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          // type: 'fraction',
          dynamicBullets: true,
          clickable: true
        }
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleMouse(key, idx) {
      this[key] = idx
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../element-variables.scss";
.home {
  background-color: #f3f8fb;
  .slider {
    position: relative;
    min-width: 1200px;
    margin: 0 auto;
    @media (max-width: 767px) {
      & {
        min-width: 100%;
      }
    }
    .swiper-pagination {
      width: 5px !important;
      top: 50%;
      left: 10px;
      //transform: translateY(-10%);
    }
    .home-notice {
      width: 100%;
      //height: 40px;
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 2;
    }
  }
  .home-search {
    display: flex;
    align-items: center;
    padding: 30px 0;
    .left-image {
      width: 230px;
      margin-right: 24px;
    }
    .right-input {
      flex: 1;
      .input-wrapper {
        display: flex;
        .search-input {
          flex: 1;
          height: 50px;
          &.el-input--medium {
            ::v-deep {
              .el-input__inner {
                height: 50px;
                line-height: 50px;
                padding-left: 50px;
                outline-style: none;
                outline-width: 0;
                border: none;
                text-shadow: none;
                -webkit-appearance: none;
                -webkit-user-select: text;
                outline-color: transparent;
                border-radius: 6px 0 0 6px;
                box-shadow: 0 0 29px 0 rgba(7,15,72,0.1);
              }
              .el-input__prefix {
                font-size: 20px;
                left: 13px;
                line-height: 50px;
              }
            }
          }
        }
        .search-button {
          border-radius: 0 6px 6px 0;
          font-size: 16px;
          width: 100px;
          outline: none;
          border: none;
          background: linear-gradient(73.5deg, $--color-primary 29%, mix($--color-primary, #fff, 60%) 100%);

          @media (max-width: 767px) {
            & {
              width: 70px;
            }
          }
        }
      }
      .hot-search {
        font-size: 14px;
        width: 100%;
        padding: 10px 0 0;
        .text {
          color: #333;
        }
        ul {
          display: inline-block;
          li {
            display: inline;
            color: $--color-primary;
            cursor: pointer;
            margin-right: 15px;
            &:nth-last-child(1) {
              margin-right: 0;
            }
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .home-card-head {
    width: 100%;
    border-bottom: 1px solid $--color-primary;
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-box {
      //position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 20px;
      &::before {
        content: '';
        width: 6px;
        height: 20px;
        background-color: $--color-primary;
        margin: 0 10px 0 0;
        //position: absolute;
        //left: 0;
        //top: 0;
      }
      .title {
        font-size: 20px;
        color: #333;
        font-weight: 700;
      }
      .title-en {
        font-size: 20px;
        color: #ccc;
        margin: 0 0 0 20px;
      }
    }
    .more-button {
      color: #999;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        color: $--color-primary;
        text-decoration: underline;
      }
    }
  }
  .home-query {
    .home-query-content {
      width: 100%;
    }
  }
  .query-tool {
    display: flex;
    height: 514px;
    background-color: #fff;
    margin: 30px 0;
    &.tool-2 {
      background: transparent;
      height: inherit;
    }
    .tool-left {
      width: 204px;
      //background-color: #39d2aa;
      height: 100%;
      padding: 20px 0 0 14px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: left top;
      &.bg-1 {
        background-image: url("../../assets/images/message-bgc1.png");
      }
      &.bg-2 {
        background-image: url("../../assets/images/message-bgc2.png");
      }
      h4 {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        line-height: 20px;
        margin: 36px 10px 40px;
      }
      .type-list {
        .type-list-item {
          cursor: pointer;
          line-height: 46px;
          font-size: 16px;
          margin-bottom: 8px;
          padding-left: 24px;
          color: #fff;
          &.active {
            background-color: #fff;
            border-radius: 12px 0 0 12px;
            color: $--color-primary;
          }
        }
      }
    }
    .tool-right {
      height: 100%;
      overflow: hidden;
      flex: 1;
      ::v-deep {
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
  }
  .micro-sub-title {
    font-size: 18px;
    color: #767c87;
    margin: 30px 0;
    line-height: 1.5;
  }
  .home-news {
    padding: 20px 0;
    .home-news-list {
      background-color: #fff;
      &__item {
        padding: 20px 10px 20px 20px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        //display: flex;
        .left-img {
          flex-shrink: 0;
          float: left;
          img {
            width: 140px;
            height: 100px;
          }
        }
        .right-news-info {
          padding: 0 20px;
          margin-left: 140px;
          flex: 1;
          .title-box {
            display: flex;
            flex-shrink: 0;
            margin: 10px 0 15px;
            h2.title {
              flex: 1;
              font-size: 18px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              flex-shrink: 0;
              color: #333;
              &:hover {
                color: $--color-primary;
                text-decoration: underline;
              }
            }
            p.time {
              width: 80px;
              text-align: right;
              font-size: 12px;
              line-height: 18px;
              color: #ccc;
            }
          }
          .sub-title {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            &:hover {
              color: $--color-primary;
              text-decoration: underline;
            }
          }
        }
        &:hover {
          //z-index: 2;
          -webkit-box-shadow: 0 5px 20px rgba(77, 185, 202,.3);
          -moz-box-shadow: 0 5px 20px rgba(77, 185, 202,.3);
          -o-box-shadow: 0 5px 20px rgba(77, 185, 202,.3);
          box-shadow: 0 5px 20px rgba(77, 185, 202,.3);
          transform: translate3d(0, -2px, 0);
          -webkit-transform: translate3d(0, -2px, 0);
        }
      }
    }
    @media (max-width: 767px) {
      .home-news-list{
        &__item {
          padding: 10px;
          .left-img {
            img {
              width: 70px;
              height: 50px;
            }
          }
          .right-news-info {
            padding: 0 10px;
            margin-left: 70px;
            .title-box {
              margin: 5px 0 5px;
              h2.title {
                font-size: 14px;
              }
            }
            .sub-title {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .home-new-interface {
    padding-bottom: 30px;
    overflow: hidden;
    .home-new-interface-inner {
      line-height: 1.8;
      background-color: #fff;
      padding: 10px 18px;
      span {
        color: #333;
        margin-right: 8px;
        &.item {
          color: #666;
          cursor: pointer;
          &:hover {
            color: $--color-primary;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
